<!-- 渐变3D饼图样式-->
<template>
    <div id="" style="height: 100%" class="higBox">
      <div id="container" style="height: 100%"></div>
      <!-- 底座背景 -->
      <div v-if="bgBol" class="bg"></div>
    </div>
  </template>
   
  <script>
  import Highcharts from "highcharts/highstock";
  import HighchartsMore from "highcharts/highcharts-more";
  import HighchartsDrilldown from "highcharts/modules/drilldown";
  import Highcharts3D from "highcharts/highcharts-3d";
   
  HighchartsMore(Highcharts);
  HighchartsDrilldown(Highcharts);
  Highcharts3D(Highcharts);
   
  let chart = {};
  export default {
    name: "",
    props: {
      optionData: {
        type: Array,
        default: () => {
          return [];
        },
      },
      bgBol: {
        type: String,
        default: false
      }
    },
    watch: {
      optionData: {
        deep: true,
        handler() {
          this.$nextTick(() => {
            this.dealData();
            this.init();
          });
        },
      },
    },
    data() {
      return {
        dataList: [],
      };
    },
    mounted() {
      this.init();
      window.addEventListener("resize", () => {
        //自适应
        this.init();
        chart.reflow();
      });
    },
    created() {
      this.dealData(); //处理父组件传过来的数据
    },
    methods: {
      dealData() {
        let quantity = 0; // 总数
        this.dataList.forEach((item) => {
          quantity += item.value;
        });
        this.dataList = this.optionData.map((item, index) => {
          // if (index == 0) {
          //   item["h"] = 10;
          // } else {
          //   item["h"] = 0;
          // }
          item["y"] = item["value"];
          item.bfb = parseInt((item.y / quantity) * 100);
          item.h = item.bfb * 1.5 >= 70 ? 70 : item.bfb * 1.5
          // console.log(item)
          return item;
        });
      },
      init() {
        let color1 = [
          "#00D7E9",
          "#42BC92",
        ];
        let color2 = [
          "#027E99",
          "#7DE2BF",
        ];
        // 饼图渐变效果
        Highcharts.getOptions().colors = Highcharts.map(
          Highcharts.getOptions().colors,
          function (color, index) {
            return {
              radialGradient: { cx: 0.5, cy: 0.3, r: 0.7 },
              stops: [
                [0, color2[index]],
                [0.2, color2[index]],
                [1, color1[index]], // darken
              ],
            };
          }
        );
   
        if (this.charts) {
          chart.destroy();
        }
        // 初始化
        chart = Highcharts.chart("container", {
          chart: {
            type: "pie",
            backgroundColor: null, //去掉背景颜色
            animation: false,
            marginTop: 10,
            options3d: {
              enabled: true,
              alpha: 60, //倾斜角度
            },
            spacingTop: 0,
            spacingLeft: 0,
            spacingRight: 0,
          },
          legend: {
            align: "center", //程度标的目标地位
            layout: "horizontal",
            verticalAlign: "top", //垂直标的目标地位
            padding: 2,
            margin: 0,
            itemStyle: {
              cursor: "pointer",
              color: "#FFFFFF",
              fontWeight: 100,
              backgroundColor: ["#ccc"],
            },
            itemHoverStyle: {
              color: "#FFFFFF",
            },
          },
          tooltip: {
            //提示框
            backgroundColor: "rgba(20,77,155,0.9000)",
            borderColor: "#34A6FF",
            color: "#fff",
            useHTML: true,
            pointFormat: '<div style="color: #fff">{point.percentage:.1f}%</div>',
            itemStyle: {
              color: "#FFFFFF",
            },
            formatter: function () {
              let s =
                '<div  style="color: #fff">' +
                this.key +
                "：" +
                this.y +
                "</div>";
              return s;
            },
          },
          title: {
            text: null,
          },
          credits: {
            enabled: false, //去掉右下角水印
          },
          plotOptions: {
            pie: {
              allowPointSelect: false,
              cursor: "pointer",
              depth: 35,
              textShadow: false,
              softConnector: false,
              dataLabels: {
                enabled: true,
                alignTo: "toPlotEdges",
                y: -10,
                // 这里是标签的引导线
                connectorShape: function (
                  labelPosition,
                  connectorPosition,
                  options
                ) {
                  var touchingSliceAt = connectorPosition.touchingSliceAt,
                    alignment = labelPosition.alignment,
                    left = 0,
                    right = 0;
                  if (alignment == "left") {
                    left = labelPosition.x + this.dataLabel.bBox.width + 20;
                    right = labelPosition.x + 2;
                  } else {
                    left = labelPosition.x - this.dataLabel.bBox.width - 20;
                    right = labelPosition.x - 2;
                  }
                  return [
                    "M",
                    left,
                    labelPosition.y,
                    "L",
                    right,
                    labelPosition.y,
                    "L",
                    touchingSliceAt.x,
                    touchingSliceAt.y,
                  ];
                },
                formatter: function () {
                  return this.y + "%";
                },
                distance: 20,
                style: {
                  color: "#FFFFFF",
                  fontSize: "12px",
                  textOutline: "none",
                  fontWeight: "400",
                },
              },
              slicedOffset: 30,
              states: {
                inactive: {
                  opacity: 1,
                  size: "100%",
                },
              },
            },
          },
          series: [
            {
              type: "pie",
              name: "Browser share",
              showInLegend: false, // 是否显示图例
              data: this.dataList, //传入数据
            },
          ],
        });
      },
    },
  };
  </script>
   
<style lang='less' scoped>
  .bg {
    z-index: 1;
    width: 80%;
    height: 120%;
    position: relative;
    background-image: url("@/assets/3Dbingtu_dizuo_bg.png");
    background-size: 100% 100%;
    transform: rotatex(50deg);
    top: -98%;
    left: 9%
  }
  .higBox{
    position: relative;
    z-index: 2;
  }
</style>